<template>
  <div>
    <myheader></myheader>
    <table class>
      <tr>
        <td>商品名称:</td>
        <td>
          <input type="text" v-model="name" />
        </td>
      </tr>
      <tr>
        <td>商品简介:</td>
        <td>
          <quill-editor ref='myTextEditor' :content='content' v-model='desc'></quill-editor>
        </td>
      </tr>
      <tr>
        <td>商品图:</td>
        <td>
          <input type="file" id="img" @change="upload_qiniu" />
        </td>
      </tr>
      <tr>
        <td>演示视频:</td>
        <td>
          <input type="file" id="image" @change="upload_qiniu_video" />
        </td>
      </tr>
      <tr v-show="loadpercent_int">
        <td>视频上传进度</td>
        <td>
          <Progress :percent="loadpercent_int" color="blue">
            <span slot="title"></span>
            <span slot="text">{{loadpercent_int}}%</span>
          </Progress>
        </td>
      </tr>
      <tr>
        <td>商品价格:</td>
        <td>
          <input type="text" v-model="price" />
        </td>
      </tr>
      <tr>
        <td>所属类型</td>
        <td>
          <input type="text" v-model="cate_id" />
        </td>
      </tr>
      <td colspan="2">商品其他规格</td>
      <tr>
        <td>颜色:</td>
        <td>
          <input type="text" v-model="color" />
        </td>
      </tr>
      <tr>
        <td>尺寸:</td>
        <td>
          <input type="text" v-model="size" />
        </td>
      </tr>
      <tr>
        <td>配置:</td>
        <td>
          <input type="text" v-model="config_value" />
        </td>
      </tr>
      <tr>
        <th>商品标签:</th>
        <!-- <td><input type="text" v-model='tags'></td> -->
        <td>
          <TagInput v-model="tags" placeholder='请输入标签,按回车确定' split="," type="string"></TagInput>
        </td>
      </tr>
      <tr>
        <Button color="yellow" :circle="true" @click="addgoods">创建商品</Button>
      </tr>
    </table>

    <mytail></mytail>
  </div>
</template>
<script>
  import myheader from "./myheader";
  import mytail from "./mytail";
  import {config} from "../config";
  import {quillEditor} from 'vue-quill-editor';
  // 引入样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    name: "insergoods",
    components: {
      myheader: myheader,
      mytail: mytail,
      quillEditor
    },
    data: function () {
      return {
        name: "",
        desc: "",
        price: 0,
        cate_id: "",
        color: "",
        size: "",
        config_value: "",
        // 七牛云token
        uptoken: "",
        img: "",
        image: "",
        loadpercent_int: 0,  // 进度条变量
        tags: '',  // 商品标签变量
        content: '',  // 在线文本编辑器
      };
    },
    mounted() {
      this.get_qiniu();
    },
    methods: {
      // 七牛云视频
      upload_qiniu_video: function (e) {
        let file = e.target.files[0];
        let data = new FormData();
        data.append("token", this.uptoken);
        data.append("file", file);
        const axios_qiniu = this.axios.create({
          withCredentials: false
        });
        // 发送请求
        axios_qiniu({
          method: "POST",
          url: "http://up-z1.qiniu.com/",
          data: data,
          timeout: 30000,
          //上传进度
          onUploadProgress: e => {
            //设置总进度对象 原理是已上传字节数/总字节数
            var comlete = e.loaded / e.total;
            // 安慰剂按钮
            if (comlete < 1) {
              this.loadpercent_int = parseInt((comlete * 100).toFixed(2));
            }
          }
        }).then(res => {
          // console.log(res.data.key);
          this.image = res.data.key;
          this.loadpercent_int = 100;  // 完成上传，使进度条满格
        });
      },
      // 获取七牛云凭证
      get_qiniu: function () {
        this.axios.get(config["qiniu_dj"]).then(res => {
          this.uptoken = res.data.token;
        });
      },
      // 上传图片
      upload_qiniu: function (e) {
        let file = e.target.files[0]; // 获取文件对象
        let data = new FormData(); // 声明参数
        data.append("token", this.uptoken); //将上传凭证添加参数
        data.append("file", file); // 添加文件
        const axios_qiniu = this.axios.create({
          withCredentials: false
        }); // 定制化一个axios
        // 发送请求
        axios_qiniu({
          method: "POST",
          url: "http://up-z1.qiniu.com/", //华北区的节点
          data: data,
          timeout: 30000
        }).then(res => {
          // console.log(res);
          this.img = res.data.key;
        });
      },
      // 创建商品
      addgoods: function () {
        // 拼接商品规格  方法二
        var parms = {};
        parms["color"] = this.color;
        parms["size"] = this.size;
        parms["config"] = this.config_value;
        // 格式化成字符串
        JSON.stringify(parms); // 将实体转换成字符串的形式
        // 从字符串转成json
        // params = JSON.parse(parms);  // 将字符串转换成JSON
        // console.log(params)
        this.axios.get("http://127.0.0.1:8000/insergoods/", {
          params: {
            name: this.name,
            desc: this.biaoqian(this.desc),
            price: this.price,
            cate_id: this.cate_id,
            img: this.img,
            image: this.image,
            parms: parms
          }
        }).then(res => {
          this.$Message(res.data.data);
          if (res.data.code == 200) {
            this.axios.get(config['inserttags'], {
              params: {
                id: res.data.id,
                tags: this.tags
              }
            }).then(res => {
              this.$Message(res.data.message);
            })
          } else {
            this.$Message(res.data.data);
          }
        });
      },
      // 去除文本编辑器中的html标签
      biaoqian:function(src){
        return src.replace(/<[^>]+>/g, "")
      }
    }
  };

</script>
<style></style>
